<template>
  <div class="wrapper">
    <div class="grid-left">
      <div class="grid grid-first head-background">
        <text class="head-text head-text-title">{{firstColHead.value}}</text>
      </div>
      <div>
        <div :ref="'column'">
          <div  class="grid grid-first"
                v-for="(item, index) in firstColData"
                :key="'firstCol' + index"
                :style="{ backgroundColor: index % 2 === 0 ? 'white' : '#F7FAFF'}"
                @click="firstColClick(index, grid[index])">
            <text class="head-text" :style="{ color: fisrtColFlag && index !== 0 ? '#3EAFFC': '#666'}">{{item}}</text>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-right">
      <div class="grid-row" style="height: 75px;" :ref="'head'">
        <div class="grid head-background" v-for="(item, index) in remainColHead" :key="'head' + index">
          <text class="head-text head-text-title">{{item.value}}</text>
        </div>
      </div>
      <scroller class="grid-row"
                scroll-direction="horizontal"
                offset-accuracy="0"
                @scroll="horizontal"
                @scrollstart="horizontal"
                @scrollend="horizontal"
                style="width: 500px;">
        <div>
            <list offset-accuracy="0"
                  @scroll="vertical">
              <cell class="grid-row"
                    v-for="(item, num) in grid"
                    :key="'row' + num"
                    :style="{ backgroundColor: num % 2 === 0 ? 'white' : '#F7FAFF' }">
                <div  class="grid"
                      v-for="(value, index) in remainColHead"
                      :key="'row' + num + 'column' + index">
                  <text class="head-text">{{item[value.name]}}</text>
                </div>
              </cell>
            </list>
        </div>
      </scroller>
    </div> 
  </div>
</template>

<script>
const animation = weex.requireModule('animation')

export default {
  name: 'grid',
  props: {
    head: {
      type: Array,
      default: []
    },
    grid: {
      type: Array,
      default: []
    }
  },
  methods: {
    horizontal (e) {
      animation.transition(this.$refs.head, {
        styles: {
          transform: 'translateX(' + e.contentOffset.x + ')'
        }
      })
    },
    vertical (e) {
      animation.transition(this.$refs.column, {
        styles: {
          transform: 'translateY(' + e.contentOffset.y + ')'
        }
      })
    },
    firstColClick (index, value) {
      const data = this.firstColHead
      if (data.isClick) {
        this.$emit('firstColClick', value)
      }
    }
  },
  computed: {
    firstColHead () {
      if (this.head === 0) {
        return null
      } else {
        return this.head[0]
      }
    },
    firstColData () {
      let arr = []
      if (this.firstColHead) {
        let key = this.firstColHead.name
        this.grid.forEach(value => {
          arr.push(value[key])
        })
      }
      return arr
    },
    remainColHead () {
      let arr = []
      this.head.forEach((value, index) => {
        if (index !== 0) {
          arr.push(value)
        }
      })
      return arr
    },
    fisrtColFlag () {
      const data = this.firstColHead
      if (data.isClick) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding-top: 23px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #CCCCCC;
  flex-direction: row;
  background-color: #CCCCCC;
  flex: 1;
}
.grid-left {
  width: 250px;
}
.grid {
  width: 250px;
  height: 75px;
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #CCCCCC;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #CCCCCC;
  align-items: center;
  justify-content: center;
}
.grid-first {
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #CCCCCC;
}
.grid-row {
  flex-direction: row;
}
.head-text {
  color: #666;
  font-size: 25px;
  text-overflow: ellipsis;
  lines: 2;
}
.head-text-title {
  // color: #3EAFFC;
  color: #567286;
}
.head-background {
  background-color: #FFF8E3;
}
</style>